<template>
	<view class="main-cont box box-tb box-pack-start box-align-center">
		<view class="top">
			<view class="search box box-align-center box-pack-start mt20">
				<u-input v-model="searchtext" type="text" :border="border" :custom-style="customStyles"
					placeholder="搜索教师" />
				<u-image src="@/static/class/icon_search.png" width="34rpx" height="34rpx" @click="listTr()">
					<u-loading slot="loading"></u-loading>
				</u-image>
			</view>
		</view>
		<view class="group">
			<view class="top box box-align-center box-pack-between">
				教师（{{page.list.length}}人）
				<!-- <u-button type="primary" @click="testjoin" :custom-style="customStyle">测试加入</u-button> -->
				<u-button type="primary" open-type="share" :custom-style="customStyle">邀请</u-button>
			</view>
			<view class="bottom">
				<view class="stu-list box box-align-center box-pack-between" v-for="(item,i) in page.list" :key="i"
					@click="details(item.id)">
					<view class="box box-align-center box-pack-start" style="width: 50%;">
						<u-avatar :src="item.icon" size="73"></u-avatar>
						<view class="ml5 mr5 stu-name box box-tb">
							<view>{{item.name}}</view>
							<view style="margin-left: 3px;font-size: 12px;">{{item.mobile}}</view>
						</view>
					</view>
					<view class="xh box box-align-center box-pack-start" style="width: 45%;" v-if="item.bjmc!=null">
						<view style="border-radius: 2px;margin: 0 2px 4px 2px;font-size: 12px;color: #0a6b96;overflow: hidden;width: 120px;height: 30px;">
							{{item.bjmc}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				unionid: '',
				schoolid: '',
				userid: '',
				searchtext: '',
				page: {
					list: []
				},
				customStyles: {
					width: "560rpx",
					padding: "40rpx",
					color: "#000"
				},
				search: "",
				customStyle: {
					width: '75px',
					height: '34px',
					lineHeight: '45rpx',
					backGround: '#7686F6',
					borderRadius: '26rpx',
					padding: '10rpx 20rpx',
					marginLeft: '30rpx'
				},
				user: uni.getStorageSync("user"),
				currSchool: uni.getStorageSync('currSchool'),
				invite_cnt: '', //邀请学校人数
				type: '' ,// 默认跳转过来   2 扫码过来
				bjmc:''
			}
		},
		onShareAppMessage(res) {
			wx.vibrateShort();
			return {
				title: this.user.name + '老师请您加入【' + this.currSchool.name + '】,已有' + this.invite_cnt + '人加入~',
				path: '/team/tr/invite?schoolid=' + this.currSchool.id + '&bjmc=' + this.bjmc +
					'&schoolname=' + this.currSchool.name + '&trname=' + this.user.name + '&icon=' + this.user.icon,
				imageUrl: 'https://yh-sys.oss-cn-beijing.aliyuncs.com/2AA82D3CF32F47D0BBFBC6037E73D503join.png?Expires=4792987242&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=skoxCO1pZ1kn3DJIiBTnGM%2FO2oY%3D'
			}
		},
		onLoad: function(options) {
			console.log(">>")
			console.log(options)
			if (options.scene != undefined) {
				console.log(1)
				this.getUnionid(options); //获取openid、unionid 并检查用户
			} else {
				console.log(2)
				this.listTr();
				//查询学校人数
				this.getschooltrs();
			}
		},
		methods: {
			details(id) {
				console.log(id)
				uni.navigateTo({
					url: `./trdetails?userid=${id}&schoolid=${this.schoolid}`
				})
			},
			listTr() {
				console.log(this.currSchool)
				this.$api.post({
					url: '/dteacher/listSchoolTr'
				}, {
					schoolid: this.currSchool.id,
					searchtext: this.searchtext
				}).then(res => {
					this.page = res.list;
					this.page.list.forEach((item, index) => {
						if (item.bjmc != null && item.bjmc != '') {
							item.bjmcs = item.bjmc.split(",");
						}
					})
				})
			},
			getschooltrs() {
				this.$api.post({
					url: '/dteacher/getschooltrs'
				}, {
					schoolid: this.currSchool.id
				}).then(res => {
					this.invite_cnt = res.cnt;
				})
			},
			getUnionid(options) {
				wx.login({
					success: res => {
						var _this = this;
						_this.$api.post({
							url: '/comm/getAppletUnionid'
						}, {
							code: res.code
						}).then(s => {
							_this.openid = s.openid;
							_this.unionid = s.unionid;
							this.currSchool = s.school;
							if (s.code == '0') {
								uni.setStorageSync('role', s.role);
								uni.setStorageSync('user', s.user);
								this.user = s.user;
								this.role = s.role;
								if (options.scene != undefined) {
									/** 解析数据 */
									var arr = decodeURIComponent(options.scene).split(',');
									this.schoolid = arr[0];
									this.userid = arr[1];
									this.type = 2;
								} else {
									this.schoolid = s.user.schoolId;
									this.userid = s.user.id;
								}

								this.listTr();
								//查询学校人数
								this.getschooltrs();
							} else {
								this.$refs.uToast.show({
									title: '您未注册用户！',
									type: 'default'
								})
								uni.reLaunch({
									url: '/pages/index/index'
								}) //无此用户 自动跳转到登录页
							}

						})
					}
				});

			},
			selecttr(id) {
				console.log(id)
			},
			share() {
				this.$u.mpShare = {
					title: '加入班级', //
					path: '/team/tr/invite?_schoolid=' + this._schoolid + '&uid=' + this.userid,
					imageUrl: 'https://yh-sys.oss-cn-beijing.aliyuncs.com/3DF1444B0B1F4140A328DB3A1B3F529Abg.png?Expires=4799124840&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=WqOfsRr7u4oR2RpYbHfmfd%2BF9pI%3D'
				}
			},
			testjoin() {
				uni.navigateTo({
					url: '/team/tr/selectRoles?schoolid=5&schoolname=服务团队'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		width: 100%;
		background-color: #fff;
		padding-bottom: 25rpx;
	}

	.search {
		margin: 20rpx auto 0;
		width: 710rpx;
		height: 86rpx;
		background: #F3F4FB;
		border-radius: 43rpx;
	}


	.main-cont {
		width: 100%;

		.list {
			padding: 0 39rpx;
			width: 100%;
			height: 140rpx;
			background: #FFFFFF;

			.icon {
				width: 8rpx;
				height: 84rpx;
				background: #FE907E;
				border-radius: 4rpx;
			}

			.class-name {
				font-size: 32rpx;
			}

			.tab {
				font-size: 26rpx;
				color: #6E73D8;
			}

			.edit {
				width: 168rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: #626BF1;
				border-radius: 23rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
			}
		}

		.group {
			margin: 20rpx 14rpx;
			width: 722rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.top {
				padding: 0 39rpx;
				height: 98rpx;
				line-height: 98rpx;
				border: 2rpx solid #F0F1F8;
			}

			.bottom {
				// height: 470px;
				overflow-y: scroll;

				.stu-list {
					padding: 0 60rpx;
					height: 130rpx;
				}

				.stu-name {
					width: 120px;
					color: #181623;
					overflow: hidden;
				}

				.tab {
					width: 86rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #FFE2CC;
					border-radius: 5rpx;
					text-align: center;
					font-size: 24rpx;
					color: #E96501;
				}
			}
		}
	}
	
	.xh{
		overflow: hidden;
		flex-wrap: nowrap;
	}
</style>
